<template>
	<view class="page">
		<template v-if="showDetail">
			<view class="pageH">
				<view class="price">
					<text class="key">支付金额：</text>
				</view>
				<view class="ul dis_f_w">
					<block v-for="(item,index) in payList" :key="index">
						<view class="li dis_f_c_c hyy box" :class="{'active':payInfo.configId==item.configId}"
							@click="chooseFun(item)">
							<text>{{item.price}}</text>
							<text class="unit">元</text>
						</view>
					</block>
				</view>
				<view class="remark">
					<text class="key">支付说明：</text>
					<text class="val">{{payInfo.info.tip}}</text>
				</view>
			</view>
			<view class="pageS">

			</view>
			<view class="pageF box">
				<view class="payBtn dis_f_c_c" @click="payFun">
					<text>去支付</text>
				</view>
			</view>
		</template>
		<template v-else>
			<more-data type="loading" v-if="userinfoStore.userinfo.token"></more-data>
			<more-data type="noData" v-else>
				<text>请先登录</text>
			</more-data>
		</template>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onReachBottom,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue'
	// 公用方法
	let {
		proxy
	} = getCurrentInstance();
	let $js = proxy.$js;
	import {
		useUserinfoStore
	} from '@/stores/userinfo'
	const userinfoStore = useUserinfoStore();
	import jiSuan from '@/common/js/jiSuan.js'

	// 是否显示详情
	let showDetail = ref(false);

	// 获取支付金额
	getPriceFun();
	// 支付信息
	let payInfo = ref({});
	let payList = ref({});
	// 获取支付金额
	function getPriceFun() {
		$js.ajax("GET", "/system/config/list", {
			pageNum: 1,
			pageSize: 99,
			configName: "小程序普通用户支付"
		}).then((res) => {
			showDetail.value = true;
			if (res.code == 200) {
				let list = res.rows;
				list.map((item) => {
					item.info = JSON.parse(item.remark);
					item.price = jiSuan.chu(item.configValue, 100);
				})
				payList.value = list;
				payInfo.value = list[0];
			} else {
				$js.tiShi(res.msg);
			}
		})
	}

	// 选择支付金额
	function chooseFun(item) {
		payInfo.value = item;
	}

	// 点击支付
	function payFun() {
		if (userinfoStore.userinfo.token) {
			$js.show("订单生成中");
			$js.ajax("POST", "/carton/wxpay/createOrder", {
				ajaxType: "form",
				parentId: userinfoStore.userinfo.parentId || "",
				openid: userinfoStore.userinfo.openid,
				configId: payInfo.value.configId,
			}).then((payInfo) => {
				console.log(payInfo);
				uni.requestPayment({
					provider: "wxpay",
					timeStamp: payInfo.timeStamp + "",
					nonceStr: payInfo.nonceStr,
					package: payInfo.package,
					signType: payInfo.signType,
					paySign: payInfo.paySign,
					success: (res) => {
						$js.show("支付成功，订单状态查询中");
						inquireOrderFun(payInfo.outTradeNo);
					},
					fail: (err) => {
						console.log(err)
						$js.tiShi("支付失败");
					}
				})
			})
		} else {
			$js.tiShi("请先登录");
		}
	}

	let inquireNum = 0;

	// inquireOrderFun("1778255196858945536");
	// 查询订单
	function inquireOrderFun(orderNum) {
		$js.ajax("GET", "/carton/wxpay/queryOrderById", {
			outTradeNo: orderNum,
		}).then((res) => {
			if (res.tradeState == "SUCCESS") {
				$js.tiShi("交易成功");
				setTimeout(() => {
					$js.back();
				}, 1200)
			} else {
				inquireNum++;
				if (inquireNum < 5) {
					setTimeout(() => {
						inquireOrderFun(orderNum);
					}, 1000);
				} else {
					$js.duiHua({
						content: "订单查询超时，如果使用期限没有更新，请联系客服处理",
						lShow: false,
						rFun: () => {
							$js.back();
						}
					});
				}
			}
		})
	}

	// 小程序分享
	onShareAppMessage(() => {
		return $js.getShareObjFun();
	})
</script>

<style lang="scss" scoped>
	.page {
		padding: 20rpx 24rpx;
	}

	.pageH {
		background: #fff;
		border-radius: 10rpx;
		padding: 30rpx 24rpx;
		overflow: hidden;
		margin-bottom: 40rpx;
		font-size: 28rpx;
		line-height: 50rpx;

		.price {
			margin-bottom: 20rpx;
		}

		.ul {
			.li {
				width: 30%;
				height: 80rpx;
				border-radius: 10rpx;
				margin-right: 5%;
				margin-bottom: 30rpx;
				background: #fff;
				border: 1px solid #79ab60;
				color: #79ab60;

				&.active {
					background-color: #79ab60;
					color: #fff;
				}

				&:nth-child(3n) {
					margin-right: 0;
				}

				.unit {
					font-size: 24rpx;
					margin-left: 4rpx;
				}
			}
		}

		.key {
			font-weight: bold;
		}

		.remark {
			margin-bottom: 20rpx;
		}
	}

	.pageS {}

	.pageF {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 20rpx 24rpx 100rpx;
		width: 100%;

		.payBtn {
			height: 80rpx;
			border-radius: 10rpx;
			font-size: 28rpx;
			color: #fff;
			background: #79ab60;
		}
	}
</style>